
/* 去除默认样式 */
*{margin:0;padding:0;}
html,body,div,img,p,a,h1,h2,h3,tr,td,ul,li,dl,dd,dt,table,th,tr,td,span,input,textarea,form{margin:0;padding:0;}
body{ font: 62.5%/1.5 'microsoft yahei', sans-serif;background-color:#ffffff;}
html,body{height: 100%;}
a{text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
ul{list-style:none;}
img{border:0;width: 100%; height: auto;display: block;}
.clearfix:before,.clearfix:after{display:block;content:"";height: 0;clear: both;visibility:hidden;}
input,select{outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-appearance: none; -moz-appearance: none;appearance: none;}
.boxsize{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
*{-webkit-tap-highlight-color:transparent;}

/* 自定义公共样式 */
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
.pa {position: absolute;top: 0;}
.rel{position: relative;}
.none{display: none;}
.index9{z-index: 9;}
.index0{z-index: -1;}
#main{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.page{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

/* 页面样式 */
#p1{
    width: 7.5rem;
    height: 15rem;
    position: absolute;
    top: 0;
    /* top: 50%;
    transform: translateY(-50%);
    z-index: 3; */
    color: #176dda;
}
.play{
    width: 100%;
    top: 0;
    font-size: 0.6rem;
    text-align: center;
}
.play2{
    width: 100%;
    top: 2rem;
    font-size: 0.6rem;
    text-align: center;
}
.hz{
    width: 100%;
    top: 0.3rem;
    font-size: 0.4rem;
    text-align: left;
    color: crimson;
}
.score{
    width: 100%;
    top: 1.2rem;
    font-size: 0.4rem;
    text-align: left;
    color: crimson;
}
.stop{
    width: 100%;
    top: 1rem;
    font-size: 0.6rem;
    text-align: center;
}
#canvas,#canvas2{
    position: absolute;
    top: 0;
    pointer-events: none;
}

/* 上下居中 */
/* #p2{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */

.arrowDown{
    -webkit-animation: arrowDown 1.5s linear infinite;
}
@-webkit-keyframes arrowDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -0.5rem, 0);
    }
    10% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
    30% {
        opacity: 0.9;
        -webkit-transform: translate3d(0, 0.2rem, 0);
    }

    40% {
        opacity: 0;
        -webkit-transform: translate3d(0,0.5rem, 0);
    }
    100% {
        opacity: 0;
    }
}
